<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title id="sys_title"></title>
    <link rel="stylesheet" href="../css/layui.css">
</head>
<body class="layui-layout-body" style="overflow-scrolling: unset">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-cyan">
        <div class="layui-logo" id="sys_name"></div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" id="atext" >
                    <img  class="layui-nav-img" id="imgurl" >
                    <span id="username" style="font-size: 14px;"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a onclick="onEdit()">基本资料</a></dd>
                    <dd><a onclick="editPass()">密码设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout"><i class="layui-icon layui-icon-logout"></i>退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll layui-bg-cyan">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        </div>
    </div>

    <div class="layui-body">
        <div id="tabzu" class="layui-tab layui-tab-card layui-tab-brief" lay-filter="tabDemo" lay-allowclose="true">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content"></div>
        </div>
    </div>

    <div class="layui-footer" >
        <!-- 底部固定区域 -->
        <span id="bottom" style="padding-left:85%"></span>
    </div>
</div>
<script src="../layui/layui.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../js/jquery.min.js"></script>
<script>
    var userId = localStorage.getItem("userId");
    var imgSrc = window.location.protocol + "//" + window.location.host + "/upload";
    $(function(){
        layui.use('element', function(){
            var layer = layui.layer;
            var element = layui.element;
            // 左侧导航区域（可配合layui已有的垂直导航）
            $.get("/current",function(data){
                console.log(data);
                if(data.data!=null){
                    getMenus(data.data);
                    element.render('nav');
                    userInfo(userId);
                }else{
                    layer.alert("权限不足，请联系管理员",function () {
                        //退出
                        window.location.href="/logout";
                    });
                }
            });

            $("#sys_name").append(localStorage.getItem("sys_name"));
            $("#sys_title").append(localStorage.getItem("sys_name"));
            $("#bottom").text(localStorage.getItem("bottom_tip"))
        });

        function userInfo(userId) {
            $.ajax({
                url:'/sysUser/findById',
                data:{"userId":userId},
                success: function (data) {
                    if(data.code == 1){
                        $("#username").append(data.data.nickname);
                        if(data.data.imgurl){
                            $("#imgurl").attr("src",imgSrc+data.data.imgurl);
                        }else{
                            $("#imgurl").attr("style","display:none");
                            $("#atext").append("<i class=\"layui-icon layui-icon-user\" style=\"font-size: 20px;\"></i>\n")
                        }
                    }
                }
            })
        }
    });
    var getMenus=function(data){
        if(data!=null){
            //回显选中
            var ul=$("<ul class='layui-nav layui-nav-tree layui-bg-cyan layui-inline' lay-filter='test'></ul>");
            for(var i=0;i < data.length;i++){
                var node=data[i];
                var li=$("<li class='layui-nav-item layui-bg-cyan' flag='"+node.id+"'></li>");
                var a=$("<a class='' href='javascript:;'>"+node.name+"</a>");
                li.append(a);
                //获取子节点
                var childArry = node.child;
                if(childArry.length>0){
                    a.append("<span class='layui-nav-more layui-bg-cyan'></span>");
                    var dl=$("<dl class='layui-nav-child layui-bg-cyan'></dl>");
                    for (var y in childArry) {
                        var dd=$("<dd><a href='javascript:;' onclick='test(this)' foole='"+childArry[y].name+"' pouse='"+childArry[y].url+"'>"+childArry[y].name+"</a></dd>");
                        //判断选中状态
                        if(childArry.indexOf(childArry[y].url)>0){
                            li.addClass("layui-nav-itemed");
                            dd.addClass("layui-this");
                        }
                        dl.append(dd);
                    }
                    li.append(dl);
                }
                ul.append(li);
            }
            $(".layui-side-scroll").append(ul);
        }else{

            layer.alert("权限不足，请联系管理员",function () {
                //退出
                window.location.href="/logout";
            });
        }
    }
    function test(objInfo){

        var name= $(objInfo).attr("foole");
        var url= $(objInfo).attr("pouse");
        if (layui.jquery(".layui-tab-title li[lay-id='" + name + "']").length > 0) {
            // 选项卡已经存在
            layui.element.tabChange('tabDemo', name);
        } else {
            // 动态控制iframe高度
            var tabheight = layui.jquery(window).height() - 195;
            contentTxt = '<iframe src="' + url
                + '" scrolling="no" width="100%" height="' + (tabheight)
                + 'PX"></iframe>';
            // 新增一个Tab项
            layui.element.tabAdd('tabDemo', {
                title : name,
                content : contentTxt,
                id : name
            })
            // 切换刷新
            layui.element.tabChange('tabDemo', name)
        }
    }
    window.onEdit = function(){
        layer.open({
            type: 2,
            shadeClose: false,
            shade: 0.8,
            area: ['25%', '75%'],
            content: '/views/system/user/userPersonal.html?userId='+userId
        });
    };
    window.editPass = function(){
        layer.open({
            type: 2,
            shadeClose: false,
            shade: 0.8,
            area: ['25%', '45%'],
            content: '/views/system/user/userEditPass.html?userId='+userId
        });
    };
</script>
</body>
</html>